<template>
  <div class="course-center-wrapper">
    <div class="input-content">
      <el-select class="select" v-model="search_type" name="type">
        <el-option key="按课程" value="按课程" label="按课程"></el-option>
        <el-option key="按教师" value="按教师" label="按教师"></el-option>
      </el-select>
      <div class="input">
        <el-input
        v-model="childKeyword"
        suffix-icon="el-icon-search">
        <el-button @click="search" slot="append">搜索</el-button>
        </el-input>
      </div>
    </div>
    <div class="courses-content">
      <CourseItem v-for="course in courses" :key="course.id" :course="course" :template-type="1"></CourseItem>
    </div>
  </div>
</template>
<script>
import CourseItem from './CourseItem'
import { getAllCourse } from '@/utils/api'

export default {
  name: 'coursecenter',
  components: {
    CourseItem
  },
  data () {
    return {
      search_type: '按课程',
      childKeyword: ''
    }
  },
  computed: {
    courses () {
      return this.$store.state.lesson
    }
  },
  watch: {
    childKeyword (curVal, oldVal) {
      this.search()
    }
  },
  async beforeMount () {
    console.log(this.$route.query)
    this.childKeyword = this.$route.query.keyword?this.$route.query.keyword : '';
    this.search();
    this.$emit('tooglesearch');
  },
  methods: {
    async search () {
      let res = await getAllCourse({ search_type: this.getType(), keyword: this.childKeyword })
      if (res.error === '10') {
        this.$store.commit('setLesson', res.result)
      }
    },
    getType () {
      return this.search_type === '按课程' ? 0 : 1
    }
  },
  destroyed () {
    this.$emit('tooglesearch');
  }
}
</script>

<style lang="less">
.course-center-wrapper {
  width: 60%;
  padding: 30px 0 50px 0;
  margin: 0 auto;
  @media screen and (max-width: 768px) {
    width: 100%;
    padding: 10px 0
  }
  .input-content {
    display: flex;
    select, input {
      border-radius: 0;
    }
    .el-input-group__append {
      background: #25a2cb;
      color: #fff;
      border-radius: 0;
      border: 1px solid #25a2cb;
    }
    .select {
      flex: 0 0 90px;
    }
    .input{
      flex: 1;
    }
    .select input{
      border-right: none;
    }
    .input input{
      border-left: none;
    }
  }
  .courses-content{

  }
}
</style>
